<template>
  <div>
    <snackbar style-color="#4A4A4A" back-color="#ffffff" status-color="#ffffff" :fixed="true" />
    <div id="card">
      <div class="box-plate">
        <input class="plate-input" type="text" value="请输入车牌" />
        <div class="button-Private-join">
          <span>自有</span>
          <span style="color: #CACACA;">加盟</span>
        </div>
      </div>
      <div class="vehicle">
        <div class="vehicle-type">
          <span class="alignRight">车型:</span>
          <input class="carTypeClass" name="carType" type="text" value="东风重卡" />
        </div>
        <div class="purchase-date">
          <span class="alignRight">购买日期:</span>
          <span>2021-5-31</span>
        </div>
        <div class="purchase-price">
          <span class="alignRight">购买单价:</span>
          <span>¥200,000</span>
        </div>
        <div class="loans">
          <div class="allLoans">
            <span class="alignRight">贷款金额:</span>
            <span>¥200,000</span>
          </div>
          <div class="supply">
            <span class="alignRight">月供:</span>
            <span>¥2,000</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },

    methods: {

    }
  }
</script>

<style scoped lang="less">


  #card {
    position: relative;
    top: 6.667vw;
    width: 92.000vw;
    height: 60.8vw;
    font-size: 1em;
    background-color: #FFFFFF;
    padding: 10.667vw 0 0 0;
    margin: 0 auto;

    .box-plate {
      width: 75.533vw;
      margin: 0.000vw auto 5.333vw auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      input {
        width: 30vw;
        height: 6.667vw;
        background-color: #CFEED4;
        font-weight: bold;
        font-size: 1.5em;
        letter-spacing: 0.533vw;
        text-align: center;
        border-radius: 1.333vw;
        margin: 0 10vw 0 0;
      }
    }


    .button-Private-join {
      margin: 0 auto;
      span {
        display: inline-block;
        width: 13.333vw;
        height: 5.333vw;
        text-align: center;
        line-height: 5.333vw;
        font-size: 1.3em;
        color: #F0AE31;
      }
    }

    .alignRight {
      width: 17.000vw;
      margin-right: 5.333vw;
      text-align: right;
      display: inline-block;
      color: #CACACA;
    }

    .vehicle-type,
    .purchase-date,
    .purchase-price,
    .loans {
      height: 10.667vw;
      line-height: 6.933vw;
    }

    .carTypeClass {
      border: 0.267vw solid #D1D1D1;
      width: 25.067vw;
      height: 6.933vw;
      text-align: center;
      font-size: 1.2em;
      border-radius: 1.333vw;
      font-weight: bold;

    }

    .vehicle {
      margin: 0 auto;
      width: 80vw;
      font-size: 1.2em;

      .loans {
        display: flex;
        justify-content: space-between;
      }
    }
  }
</style>
